<template>
  <view class="page">
    <view v-if="!isStart" class="landing">
      <view class="header">
        <view class="header-content">
          <text class="header-title">霍兰德职业兴趣测评</text>
          <text class="header-subtitle">探索你的职业潜能，发现最适合你的发展方向</text>
        </view>
        <view class="header-decoration">
          <view class="decoration-circle"></view>
          <view class="decoration-dots"></view>
        </view>
      </view>

      <view class="features-grid">
        <!-- <view class="feature-card">
          <view class="feature-icon">🔍</view>
          <text class="feature-title">专业测评</text>
          <text class="feature-desc">基于霍兰德职业兴趣理论的专业测评</text>
        </view> -->
        <view class="feature-card">
          <view class="feature-icon">📈</view>
          <text class="feature-title">精准分析</text>
          <text class="feature-desc">六大维度全面评估你的职业倾向</text>
        </view>
        <view class="feature-card">
          <view class="feature-icon">🎯</view>
          <text class="feature-title">职业匹配</text>
          <text class="feature-desc">为你推荐最适合的职业发展方向</text>
        </view>
      </view>

      <view class="test-process">
        <text class="section-title">测试流程</text>
        <view class="process-timeline">
          <view class="timeline-item">
            <view class="timeline-number">1</view>
            <view class="timeline-content">
              <text class="timeline-title">开始测试</text>
              <text class="timeline-desc">回答精心设计的问题</text>
            </view>
          </view>
          <view class="timeline-item">
            <view class="timeline-number">2</view>
            <view class="timeline-content">
              <text class="timeline-title">获取分析</text>
              <text class="timeline-desc">系统分析你的职业兴趣类型</text>
            </view>
          </view>
          <view class="timeline-item">
            <view class="timeline-number">3</view>
            <view class="timeline-content">
              <text class="timeline-title">查看报告</text>
              <text class="timeline-desc">获取详细的职业发展建议</text>
            </view>
          </view>
        </view>
      </view>

      <view class="action-area">
        <button class="start-button" @click="goStart">
          <text class="button-text">开始测试</text>
          <view class="button-arrow">→</view>
        </button>
        <text class="disclaimer">本测试基于霍兰德职业兴趣理论，结果仅供参考</text>
      </view>

      <view class="pub_ad_banner">
        <!-- #ifdef MP-TOUTIAO -->
        <ad
          :unit-id="adBannerIdDouyin"
          :ad-intervals="30"
          :fixed="false"
          type="banner"
          scale="100"
        />
        <!-- #endif -->
        <!-- #ifdef MP-KUAISHOU -->
        <ad :type="100011054" :unit-id="adBannerIdKuaishou"></ad>
        <!-- #endif -->
      </view>
    </view>

    <view v-else class="test">
      <view v-if="isFinish" class="result">
        <view v-if="isLock" class="unlock">
          <view class="unlock-content">
            <view class="unlock-icon">🎉</view>
            <text class="unlock-title">测试完成</text>
            <text class="unlock-subtitle">解锁你的职业兴趣报告</text>
            <button class="unlock-button" @click="submit">
              <text class="button-text">查看完整报告</text>
            </button>
          </view>
        </view>
        <view v-else class="report">
          <view class="report-header">
            <text class="report-title">你的职业兴趣类型</text>
            <text class="report-type">{{ curResult.title }}</text>
            <view class="report-divider"></view>
          </view>
          <view class="report-content">
            <text class="report-desc">{{ curResult.desc }}</text>
          </view>
          <button class="restart-button" @click="goHome">
            <text class="button-text">重新测试</text>
          </button>
        </view>
      </view>

      <view v-else class="quiz">
        <view class="progress">
          <view class="progress-info">
            <text class="progress-text">问题 {{ curIndex + 1 }}/{{ dataList.length }}</text>
            <text class="progress-percent">{{ Math.round(((curIndex + 1) / dataList.length) * 100) }}%</text>
          </view>
          <view class="progress-bar">
            <view class="progress-fill" :style="{ width: `${((curIndex + 1) / dataList.length) * 100}%` }"></view>
          </view>
        </view>

        <view class="question-card">
          <text class="question-text">{{ curQuizInfo.question }}</text>
          <view class="options">
            <view
              class="option"
              v-for="(item, index) in curQuizInfo.answerList"
              :key="index"
              :class="{ selected: item.select }"
              @click="selectAnswer(index)"
            >
              <text class="option-text">{{ item.answer }}</text>
            </view>
          </view>
        </view>
        <view class="pub_ad_banner">
          <!-- #ifdef MP-TOUTIAO -->
          <ad
            :unit-id="adBannerIdDouyin"
            :ad-intervals="30"
            :fixed="false"
            type="banner"
            scale="100"
          />
          <!-- #endif -->
          <!-- #ifdef MP-KUAISHOU -->
          <ad :type="100011054" :unit-id="adBannerIdKuaishou"></ad>
          <!-- #endif -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  showAdConfirmModal,
  adBannerIdDouyin,
  adBannerIdKuaishou,
} from "@/common/ad";
import banner from "./static/jobInterest_banner.jpg";
import { jobInterestDataList, jobInterestResultList } from "./static/jobInterest.js";
export default {
  data() {
    return {
      isStart: false,
      banner: banner,
      adBannerIdDouyin: adBannerIdDouyin,
      adBannerIdKuaishou: adBannerIdKuaishou,
      curQuizInfo: {
        question: "",
        score: 0,
        answerList: [],
      },
      curResult: {
        level: null,
        min: null,
        max: null,
        title: "",
        desc: "",
      },
      isLock: true,
      isFinish: false,
      curIndex: 0,
      totalScore: 0,
      dataList: [],
      resultList: jobInterestResultList,
      resultMap: {},
      jobInterestTotalScore: {
        R: 0,
        I: 0,
        A: 0,
        S: 0,
        E: 0,
        C: 0,
      },
    };
  },
  methods: {
    goStart() {
      this.initQuiz();
      this.isStart = true;
    },
    initQuiz() {
      let newDataList = jobInterestDataList;
      for (let i in newDataList) {
        for (let j in newDataList[i].answerList) {
          newDataList[i].answerList[j].select = false;
        }
      }
      this.dataList = newDataList;
      if (this.dataList.length > 0) {
        this.curQuizInfo = this.dataList[0];
      }
    },
    submit() {
      showAdConfirmModal(() => {
        try {
          adVideoShow(() => {
            this.unLock();
          });
        } catch (error) {
          this.unLock();
        }
      });
    },
    // 返回最高分的键
    getHighestScoreKey(obj) {
      let highestScore = -Infinity;
      let highestScoreKey = null;
      for (const key in obj) {
        if (obj[key] > highestScore) {
          highestScore = obj[key];
          highestScoreKey = key;
        }
      }
      return highestScoreKey;
    },
    // 解锁
    unLock() {
      let curType = "";
      curType = this.getHighestScoreKey(this.jobInterestTotalScore);
      for (let i in this.resultList) {
        if (curType == this.resultList[i].type) {
          this.curResult = this.resultList[i];
        }
      }
      this.isLock = false;
    },
    selectAnswer(index) {
      let curAnswer = this.dataList[this.curIndex].answerList;
      for (let i in curAnswer) {
        curAnswer[i].select = false;
      }
      curAnswer[index].select = true;
      for (let i in this.jobInterestTotalScore) {
        if (i == curAnswer[index].value) {
          this.jobInterestTotalScore[i] += 1;
        }
      }
      if (this.curIndex < this.dataList.length - 1) {
        setTimeout(() => {
          this.curIndex += 1;
          this.curQuizInfo = this.dataList[this.curIndex];
        }, 1000);
      } else {
        setTimeout(() => {
          this.isFinish = true;
        }, 1000);
      }
    },
    back() {
      if (this.curIndex > 0) {
        this.curIndex -= 1;
      } else {
        this.isStart = false;
      }
    },
    goHome() {
      this.isStart = false;
    },
  },
};
</script>

<style scoped lang="scss">
.page {
  min-height: 100vh;
  background: #f5f7fa;
}

.landing {
  .header {
    position: relative;
    padding: 60rpx 40rpx;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #fff;
    overflow: hidden;

    .header-content {
      position: relative;
      z-index: 2;
    }

    .header-title {
      font-size: 48rpx;
      font-weight: 700;
      margin-bottom: 20rpx;
      display: block;
    }

    .header-subtitle {
      font-size: 28rpx;
      opacity: 0.9;
      display: block;
    }

    .header-decoration {
      position: absolute;
      right: -100rpx;
      top: -100rpx;
      width: 400rpx;
      height: 400rpx;
      
      .decoration-circle {
        position: absolute;
        width: 300rpx;
        height: 300rpx;
        border: 4rpx solid rgba(255,255,255,0.1);
        border-radius: 50%;
      }
      
      .decoration-dots {
        position: absolute;
        width: 200rpx;
        height: 200rpx;
        background-image: radial-gradient(rgba(255,255,255,0.2) 2rpx, transparent 2rpx);
        background-size: 20rpx 20rpx;
      }
    }
  }

  .features-grid {
    margin: -40rpx 30rpx 40rpx;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20rpx;
    position: relative;
    z-index: 2;

    .feature-card {
      background: #fff;
      padding: 40rpx;
      border-radius: 20rpx;
      box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);
      text-align: center;

      .feature-icon {
        font-size: 48rpx;
        margin-bottom: 20rpx;
      }

      .feature-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 12rpx;
        display: block;
      }

      .feature-desc {
        font-size: 26rpx;
        color: #6b7280;
        line-height: 1.5;
        display: block;
      }
    }
  }

  .test-process {
    margin: 0 30rpx 40rpx;
    background: #fff;
    border-radius: 20rpx;
    padding: 40rpx;
    box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);

    .section-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #1f2937;
      margin-bottom: 40rpx;
      display: block;
      text-align: center;
    }

    .process-timeline {
      .timeline-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 40rpx;
        position: relative;

        &:last-child {
          margin-bottom: 0;
        }

        .timeline-number {
          width: 60rpx;
          height: 60rpx;
          background: #6366f1;
          color: #fff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;
          font-weight: 600;
          margin-right: 20rpx;
          flex-shrink: 0;
        }

        .timeline-content {
          flex: 1;
          padding-top: 10rpx;

          .timeline-title {
            font-size: 30rpx;
            font-weight: 500;
            color: #1f2937;
            margin-bottom: 8rpx;
            display: block;
          }

          .timeline-desc {
            font-size: 26rpx;
            color: #6b7280;
            display: block;
          }
        }
      }
    }
  }

  .action-area {
    margin: 0 30rpx 40rpx;
    text-align: center;

    .start-button {
      background: #6366f1;
      color: #fff;
      padding: 30rpx 0;
      border-radius: 16rpx;
      font-size: 32rpx;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20rpx;
      transition: all 0.3s ease;

      .button-text {
        margin-right: 12rpx;
      }

      .button-arrow {
        font-size: 28rpx;
      }

      &:active {
        transform: scale(0.98);
        background: #4f46e5;
      }
    }

    .disclaimer {
      font-size: 24rpx;
      color: #9ca3af;
    }
  }
}

.test {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 30rpx;

  .progress {
    margin-bottom: 30rpx;

    .progress-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 16rpx;

      .progress-text {
        font-size: 28rpx;
        color: #1f2937;
        font-weight: 500;
      }

      .progress-percent {
        font-size: 28rpx;
        color: #6366f1;
        font-weight: 600;
      }
    }

    .progress-bar {
      height: 8rpx;
      background: #e5e7eb;
      border-radius: 4rpx;
      overflow: hidden;

      .progress-fill {
        height: 100%;
        background: #6366f1;
        transition: width 0.3s ease;
      }
    }
  }

  .question-card {
    background: #fff;
    border-radius: 20rpx;
    padding: 40rpx;
    box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);

    .question-text {
      font-size: 32rpx;
      color: #1f2937;
      font-weight: 500;
      line-height: 1.6;
      margin-bottom: 40rpx;
    }

    .options {
      .option {
        background: #f9fafb;
        padding: 30rpx;
        border-radius: 12rpx;
        margin-bottom: 20rpx;
        transition: all 0.3s ease;

        .option-text {
          font-size: 28rpx;
          color: #1f2937;
          line-height: 1.5;
        }

        &:active {
          transform: scale(0.98);
        }

        &.selected {
          background: #6366f1;
          .option-text {
            color: #fff;
          }
        }
      }
    }
  }

  .result {
    .unlock {
      background: #fff;
      border-radius: 20rpx;
      padding: 60rpx 40rpx;
      text-align: center;
      box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);

      .unlock-content {
        .unlock-icon {
          font-size: 80rpx;
          margin-bottom: 30rpx;
        }

        .unlock-title {
          font-size: 36rpx;
          color: #1f2937;
          font-weight: 600;
          margin-bottom: 16rpx;
          display: block;
        }

        .unlock-subtitle {
          font-size: 28rpx;
          color: #6b7280;
          margin-bottom: 40rpx;
          display: block;
        }

        .unlock-button {
          background: #6366f1;
          color: #fff;
          padding: 30rpx 0;
          border-radius: 16rpx;
          font-size: 32rpx;
          font-weight: 600;
          transition: all 0.3s ease;

          &:active {
            transform: scale(0.98);
            background: #4f46e5;
          }
        }
      }
    }

    .report {
      background: #fff;
      border-radius: 20rpx;
      padding: 40rpx;
      box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);

      .report-header {
        text-align: center;
        margin-bottom: 40rpx;

        .report-title {
          font-size: 32rpx;
          color: #1f2937;
          font-weight: 600;
          margin-bottom: 20rpx;
          display: block;
        }

        .report-type {
          font-size: 40rpx;
          color: #6366f1;
          font-weight: 700;
          margin-bottom: 20rpx;
          display: block;
        }

        .report-divider {
          width: 60rpx;
          height: 4rpx;
          background: #6366f1;
          margin: 0 auto;
          border-radius: 2rpx;
        }
      }

      .report-content {
        .report-desc {
          font-size: 28rpx;
          color: #4b5563;
          line-height: 1.8;
          margin-bottom: 40rpx;
        }
      }

      .restart-button {
        background: #6366f1;
        color: #fff;
        padding: 30rpx 0;
        border-radius: 16rpx;
        font-size: 32rpx;
        font-weight: 600;
        transition: all 0.3s ease;

        &:active {
          transform: scale(0.98);
          background: #4f46e5;
        }
      }
    }
  }
}

.pub_ad_banner {
  margin: 30rpx 0;
  border-radius: 16rpx;
  overflow: hidden;
}
</style>

